<template>
  <div>
    <div class="card" style="line-height: 30px">
      <!-- 日期选择 -->
      <div class="demo-date-picker">
        <div class="block">
          <span class="demonstration">选择时间段</span>
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
          />
        </div>

      </div>
      <div>
          <el-table :data="data.tableData" style="width: 100%" @row-click="change">
            <el-table-column prop="employee_name" label="姓名" />
            <el-table-column prop="position" label="职位" />
          </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { handleError, reactive } from "vue";
import { Calendar, Search } from '@element-plus/icons-vue'
import request from "@/utils/request";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import {useStore} from 'vuex'
import router from "@/router"
import { ref } from 'vue';

const store=useStore()

const data=reactive({
  staff_id:'',
  starTime:0,
  endTime:0,
  tableData:[],

})

const value1 = ref('')

const load=()=>{

  axios.get('http://localhost:8088/GET/EmployeeInfo').then(res=>{
    console.log(res.data.data.EmployeeInfoList)
    for(let i=0;i<res.data.data.EmployeeInfoList.length;i++){
      if(res.data.data.EmployeeInfoList[i].employee_position>=4&&res.data.data.EmployeeInfoList[i].employee_position<=6){
        data.tableData[i]=res.data.data.EmployeeInfoList[i];
        if(data.tableData[i].employee_position==0){
        data.tableData[i].position="老板"
      }else if(data.tableData[i].employee_position==1){
        data.tableData[i].position="模型主管"
      }else if(data.tableData[i].employee_position==2){
        data.tableData[i].position="渲染主管"
      }else if(data.tableData[i].employee_position==3){
        data.tableData[i].position="后期主管"
      }else if(data.tableData[i].employee_position==4){
        data.tableData[i].position="模型员工"
      }else if(data.tableData[i].employee_position==5){
        data.tableData[i].position="渲染员工"
      }else if(data.tableData[i].employee_position==6){
        data.tableData[i].position="后期员工"
      }else if(data.tableData[i].employee_position==7){
        data.tableData[i].position="前台"
      }
      }
    }
    console.log(data.tableData)
    // data.tableData=res.data.data.EmployeeInfoList
  })
}

load()

const change=(row)=>{
   // 获取开始日期
   data.starTime = value1.value[0];
  // 获取结束日期
  data.endTime = value1.value[1];
  // 将日期转换为时间戳
  const startTime = new Date(data.starTime).getTime();
  const endTime = new Date(data.endTime).getTime();
  const staff_id=row.staff_id
  console.log(startTime)
  console.log(endTime)
  console.log(staff_id)

  window.open(`http://localhost:8088/GET/monitorZip?staff_id=${staff_id}&startTime=${startTime}&endTime=${endTime}`);
}
</script>




<style scoped>
.demo-progress .el-progress--circle {
  margin-right: 15px;
}
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 0;
  padding-bottom:0;
  text-align: left;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>